<template>
  <!--公共物品-->
  <div class="show_items">
    <div class="show_items_head">
        <div style="display: flex;
                    align-items: center;margin-left: 20px">
          <svg t="1665649536851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7468" width="32" height="32"><path d="M960 253.184l-448-192-448 192v547.392l448 190.72 38.688-16.48h8.192v-3.488L960 800.608V253.184z m-448 163.424l-113.536-48.32 318.944-147.2c0.736-0.352 1.216-0.992 1.92-1.408l127.232 54.528L512 416.608z m128.704-230.624l-321.696 148.48-141.568-60.288L512 130.816l128.704 55.168zM128 322.688l128 54.496V576a32 32 0 1 0 64 0v-171.52l0.064-0.032 174.816 74.432v435.584L128 758.272V322.688z m430.88 579.104V466.208L896 322.688v435.616l-337.12 143.488z" p-id="7469" fill="#7dc5eb"></path></svg>
          <span style="font-size: 24px;margin-left: 5px">公共物品</span>
        </div>
      <div>
        <el-button style="width: 100px;height: 40px;color:#FFFFFF;background-color: cornflowerblue;margin-right: 20px" @click="">
          新增公共物品
        </el-button>
      </div>
    </div>
    <el-tabs style="height: 100%;" class="Display_Tabs">

        <el-row class="Display_row" style="height: 100%">
          <el-col class="Display_Search">
            <span class="Display_Search_Button">
              <el-button style="margin-bottom: 10px">
                <el-icon><Search /></el-icon>
              </el-button>
            </span>
            <span class="Display_Search_Input">
              <el-input type="text" placeholder="请输入物品名称"/>
            </span>
            <span class="Display_Search_Dept">
              <span>请选择部门：</span>
              <el-cascader :options="options">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </span>
          </el-col>
          <el-col class="Display_Search_Table">
            <el-table :data="d.tableData" height="496" style="width: 100%;font-size: 14px" >
              <el-table-column prop="publicNo" label="物品编号"  align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="publicName" label="物品名称"  align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="publicTime" label="使用日期"   align="center" :show-overflow-tooltip="true" sortable/>
              <el-table-column prop="coden.codenName" label="类型"  align="center"  :show-overflow-tooltip="true"/>
              <el-table-column prop="publicBranch" label="所属部门"   align="center" :show-overflow-tooltip="true"/>
              <el-table-column prop="publicSum" label="物品单价"  align="center"  :show-overflow-tooltip="true" sortable/>
              <el-table-column prop="publicAmount" label="数量"  align="center"  :show-overflow-tooltip="true" sortable/>
              <el-table-column prop="publicRemark" label="备注"  align="center" >
                <template #default="scope">
                  <div v-if="scope.row.publicRemark != null">
                    <el-popover effect="light" trigger="hover" placement="top" width="auto">
                      <template #default>
                        <div style="text-align: center" v-if="scope.row.publicRemark != null">
                          {{ scope.row.publicRemark }}
                        </div>
                      </template>
                      <template #reference>
                        <el-tag style="font-size:14px ; width: 80%">查 看</el-tag>
                      </template>
                    </el-popover>
                  </div>
                  <div v-if="scope.row.publicRemark == null" style="width: 80%;
                              height: 90%;
                              margin: 0 10% ;
                              border-radius: 10px ;
                              color: #909399;
                              background: #f4f4f5;
                              border-color: #d3d4d6;">
                    暂无备注
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="publicStatus" label="状态" align="center" :show-overflow-tooltip="true">
                <template #default="scope">
                  <div v-if="scope.row.publicStatus == 0" style="width: 80%;
                          height: 90%;
                          margin: 0 10% ;
                          border-radius: 10px ;
                          color: #71e2a3;
                          background-color: #e7faf0;
                          border-color: #d0f5e0;">
                    良 好
                  </div>
                  <div v-if="scope.row.publicStatus == 1" style="width: 80%;
                          height: 90%;
                          margin: 0 10% ;
                          border-radius: 10px ;
                          background-color: #ffeded;
                          border-color: #ffdbdb;
                          color: #ff4949;">
                    损 坏
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <el-button>
                  报 备 维 修
                </el-button>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class="Display_Search_paging">

            <el-pagination
                style="padding-top: 10px"
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                small="small"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
          </el-col>
        </el-row>
    </el-tabs>

  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from "vue";
import axios from "axios";

const options = [
  {
    value:'1',
    label:'人事部',
  },
  {
    value:'2',
    label:'财务部',
  },
  {
    value:'3',
    label:'后勤部',
  },
  {
    value:'4',
    label:'技术部',
  },

]


const d = reactive({
  //table当前展示的数据
  list:null,
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:10,
  //数据
  tableData:[],
  //分类数据
  typeData:[],
});

//前端分页
const ItemTable=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ItemTable.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}
const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}

/**
 * 查询出所有的公共物品，带时间排序
 */
const ItemData = () =>{
  axios.get("http://localhost:1688/PublicWare/selectWareType").then((res)=>{
    console.log(res.data.data)
    var data = res.data.data
    //放入表格中
    ItemTable.value = data;
    //获取到表格数据长度
    d.total = res.data.data.length;
    //调用前端分页方法
    getTabelData();
  })
}

/**
 * 查询出所有的公共物品分类
 * @constructor
 */
const Conde = () =>{
  axios.get("http://localhost:1688/PublicWare/selectListCoden").then((res)=>{
    console.log(res.data.data)
    var data = res.data.data
    d.typeData = data
  }).catch()
}

//加载数据
onBeforeMount(() =>{
  ItemData();
  Conde();
})


</script>

<style>
.show_items{
  width: 100%;
  height: 100%;
}
.show_items_head{
  height: 74px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Display_Search_Input{
  width: 300px;
  margin: 0px 20px;
  display: flex;
  flex-direction: row;
}

.Display_Search_Button{
  margin: 0px 30px 0px 0px;
}
.Display_Search{
  display: flex;
  flex-direction: row-reverse;
  height: 35px;
  font-size: 13px;
  color: #606266;
  line-height: 35px;

}
.Display_Search_Table{
  margin-top: 10px;
  height: 100%;
}
.Display_Tabs {
  height: 100%;
}
.Display_row{
  height: 100%;
  position: relative;
}
.Display_Search_paging{
  width: 100%;
  background-color: #FFFFFF;
  height: 40px;
}
</style>